<script setup lang="ts">
import { computed } from 'vue';
import { ArrowUpIcon, AttachIcon, CloseIcon, RectangleIcon } from 'tdesign-icons-vue-next';
import { getFileIcon, formatFileSize } from '../constants';

const props = defineProps({
  message: String,
  files: Array,
  isLoading: Boolean,
});

const emit = defineEmits([
  'update:message',
  'update:inputs',
  'update:files',
  'send-message',
  'remove-file',
  'stop-message',
]);

const handleEnter = (value, context) => {
  console.log('value', value);
  console.log('context', context);
  if (context.e.key === 'Enter' && !context.e.shiftKey) {
    context.e.preventDefault(); // 阻止默认换行行为
    seedDefaultMessage();
  }
};

const seedDefaultMessage = () => {
  emit('update:files', props.files);
  emit('update:inputs', {});
  emit('send-message');
};

// 使用计算属性实现双向绑定
const inputMessage = computed({
  get: () => props.message,
  set: (value) => emit('update:message', value),
});
</script>

<template>
  <div class="input-area-container">
    <div v-if="files.length > 0" class="file-list">
      <t-row :gutter="[16, 16]" :cols="4" class="file-box">
        <div v-for="file in files" :key="file.uid" class="file-item">
          <div class="file-card">
            <!-- 图标区域 -->
            <div class="file-icon">
              <t-icon
                :name="file.status === 'parsing' ? 'loading' : getFileIcon(file)"
                :class="{ 'rotate-icon': file.status === 'parsing' }"
              />
            </div>

            <!-- 文件信息 -->
            <div class="file-info">
              <div class="file-name text-ellipsis">{{ file.name }}</div>
              <div class="file-meta">
                <span class="file-size">{{ formatFileSize(file.size) }}</span>
              </div>
            </div>
            <!-- 删除按钮 -->
            <div class="file-actions">
              <t-button variant="text" shape="circle" @click.stop="emit('remove-file', file)">
                <close-icon />
              </t-button>
            </div>
          </div>
        </div>
      </t-row>
    </div>

    <t-col class="input-with-button">
      <div class="input-box">
        <t-textarea
          v-model="inputMessage"
          placeholder="有什么可以帮到您"
          :autosize="{ minRows: 2, maxRows: 12 }"
          @keypress="handleEnter"
        />
      </div>
      <div class="action-buttons">
        <t-tooltip class="file-btn" placement="top" content="附件">
          <t-button theme="primary" variant="outline" shape="circle" @click="emit('upload')">
            <template #icon>
              <attach-icon />
            </template>
          </t-button>
        </t-tooltip>
        <t-button
          v-if="!isLoading"
          class="send-btn"
          :disabled="!message"
          shape="circle"
          theme="primary"
          @click="seedDefaultMessage"
        >
          <template #icon>
            <arrow-up-icon />
          </template>
        </t-button>
        <t-button v-else class="stop-btn" shape="circle" theme="primary" @click="$emit('stop-message')">
          <template #icon>
            <rectangle-icon style="background-color: white; font-size: 12px" />
          </template>
        </t-button>
      </div>
    </t-col>
  </div>
</template>

<style scoped lang="less">
@import url('../index.less');
</style>
